{% extends 'base.html' %}
{% block content %}

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
  {% for category, message in messages %}
    <div id="alert-message" class="alert alert-{{ category }}">
        {{ message }}
    </div>
    {% endfor %}
  {% endif %}
{% endwith %}

<div class="row">
    {% include('partials/object_creation.html') %}

<div class="col-9">
        {% if objects %}
        <table class="table">
            <thead class="thead-light">
                <tr class="row">
                    <th scope="col" class="col-2" >Name</th>
                    <th scope="col" class="col-1" >Address</th>
                    <th scope="col" class="col-2" >Type</th>
                    <th scope="col" class="col-1" >Writable</th>
                    <th scope="col" class="col-2" >Object Name</th>
                    <th scope="col" class="col-2" >Value</th>
                    <th scope="col" class="col-2" >Action</th>
                </tr>
            </thead>
            <tbody id="var-body">
                {% for obj in objects %}
                    {% for variable in obj.object_variables %}
                        <tr id="var-{{ variable.id }}" class="row">
                            <td class="col-2 pb-0">{{variable.variable_name}}</td>
                            <td class="col-1 pb-0">{{ variable.variable_address }}</td>
                            <td class="col-2 pb-0" >{{ variable.variable_type }}</td>
                            <td class="col-1 pb-0" > 
                                {% if variable.variable_writable %}  <i data-feather="check"></i> {% else %} <i data-feather="x-circle"></i> {% endif %}
                            </td>
                            <td class="col-2 pb-0" >{{ variable.object.object_name }}</td>
                            <td class="col-2 pb-0" >{{ variable.variable_value }}</td>
                            <td class="col-2 pb-0" >
                                <p>
                                    <a data-name="{{ variable.variable_name }}" data-id="{{ variable.id }}" class="btn btn-danger btn-sm var-del-btn" href="{{ url_for('delete_var',var_id=variable.id ) }}"> Delete </i> </a>
                                </p>
                            </td>
                        </tr>
                    {% endfor %}
                {% endfor %}
                {# {% for variable in variables %}
                {% endfor %} #}
            </tbody>
        </table>
        <hr>
            {% include "partials/variable_creation.html" %}
        {% endif %}
</div>
</div>

{% endblock %}}
{% block javascripts %}
    {{ super() }}
    <script>            
            $('#address').on('keyup',function(e){
                const bool_check = /^.*(\d+)\.(\d)$/;
                const int_check = /^.*(w|W)(\d+)$/;
                const float_check = /^.*(d|D)(\d+)$/;
                e.preventDefault()
                    
                 val = $(this).val()
                 
                if( bool_check.test(val) ){
                    $('#input-box').html(
                        '<div class="custom-control custom-radio custom-control-inline">\
                            <input type="radio" class="custom-control-input" id="trueval" name="value" value="True">\
                            <label class="custom-control-label" for="trueval">True</label>\
                        </div>\
                        <div class="custom-control custom-radio custom-control-inline">\
                            <input type="radio" class="custom-control-input" id="falseval" name="value" value="False" checked="checked">\
                            <label class="custom-control-label" for="falseval">False</label>\
                        </div>'
                        )
                        $('#var_type').val('bool')
                }
                else if( int_check.test(val) ){
                    $('#input-box').html(
                        '<input class="form-control" id="value" name="value" placeholder="0.0"  type="number" value="0">'
                    )
                    $('#var_type').val('int')
                }
                else if( float_check.test(val) ){
                    $('#input-box').html(
                        '<input class="form-control" id="value" name="value" placeholder="0" type="number" value="0.0">'
                    )
                    $('#var_type').val('float')
                }
                $('#refresh-val').on('click',function(e){
                    e.preventDefault()
                    $('#input-box').html(
                        '<input class="form-control" id="value" name="value" placeholder="" type="text" value="">'
                    )
                    $('#var_type').val('NoneType')
                });
            })
    </script>
{% endblock %}

